<template>
    <div>
        <h2>当前求和为:{{count}}</h2>
        <!-- <h4>求和值放大10倍查看:{{$store.getters.ncount}}</h4> -->
        <h4>求和值放大10倍查看:{{ncount}}</h4>
        <!-- <h4>{{sclName}},{{stuName}},{{smlName}}</h4> -->
        <h4>{{schoolName}},{{studentName}},{{smallName}}</h4>
        <h3 style="color: red;">Person组件的总人数为:{{personList.length}}</h3>
        <div>
            <select v-model.number="x">
                <option value=1 >1</option>
                <option value=2 >2</option>
                <option value=3 >3</option>
            </select>
            <button @click="add(x)">+</button>
            <button @click="reduce(x)">-</button>
            <button @click="oddAdd(x)">当前求和为奇数再加</button>
            <button @click="waitAdd(x)">等一等再加</button>
        </div>
    </div>
</template>
<script>
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'

export default {
    name:'Count',
    data() {
            return {
                // 此时count 需要放到vuex的state中 因为是多组件需要使用
                x:1,
            }
        },
        computed:{
            // sclName(){
            //     return this.$store.state.schoolName
            // },
            // stuName(){
            //     return this.$store.state.studentName
            // },
            // smlName(){
            //     return this.$store.state.smallName
            // }

            // 下面这种写法是上面那种写法的简写，是vuex提供的一种数据映射方法， 
            // ...mapState({sclName:'schoolName',stuName:'studentName',smlName:'smallName'})

            //还有一种数组的写法
            ...mapState('countModule',['schoolName','studentName','smallName','count']),
            ...mapState('personModule',['personList']),

            // ...mapGetters({ncount:'ncount'})

            ...mapGetters('countModule',['ncount']),

           
        },
        methods: {

            // 对象和数组的写法都有  注意这个写法有个坑 因为映射的方法名是没有加（）的 而且也不是组件本身的methods所以他会觉得你没有传参数 所以默认给了一个event事件给vuex对象
            ...mapActions('countModule',{add:'jia',reduce:'jian'}),

            ...mapMutations('countModule',{oddAdd:'ODDADD',waitAdd:'WAITADD'})
            // add(){
            //     // this.$store.dispatch('jia',this.x)
            //     this.$store.commit('JIA',this.x)
            //     //业务逻辑简单可以直接使用commit来实现，但是不要直接在这里通过$store.state来修改数据，这里修改的话devtool就检测不到了
            //     //另外dispatch可以重复派遣，每一段分别实现不同的业务逻辑
            // },
            // reduce(){
            //     this.$store.dispatch('jian',this.x)
                
            // },
            // oddAdd(){
            //     this.$store.dispatch('oddAdd',this.x)
            // },
            // waitAdd(){
            //     this.$store.dispatch('waitAdd',this.x)
            // }
        },
        mounted() {
            // vc上成功挂载$store属性
            // console.log(this)

            
        },
}
</script>
<style>
    
</style>